{% extends 'base.html' %}

<!--页面内容-->
{% block content %}
<!--智能药品分包机器人系统-->
<section class="heading-slider">
    <div class="layui-carousel" id="starting_slider" lay-filter="starting_slider">
        <div carousel-item="">
<!--            中国智能摆药产业-->
            <div class="item">
                <div class="slider-1">
                    <div class="slider-inner">
                        <div class="container">
                            <div class="row">
                                <div class="slider-inner-text">
                                    <h2 class="welcome-title">中国智能摆药产业</h2>
                                    <h2>健康发展的倡导者、引领者、推动者 !</h2>
                                    <p>Advocate, leader and promoter of the healthy development of China's intelligent
                                        drug
                                        delivery industry</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<!--            让产品有合理标准-->
            <div class="item">
                <div class="slider-2">
                    <div class="slider-inner">
                        <div class="container">
                            <div class="row">
                                <div class="slider-inner-text">
                                    <h2 class="welcome-title">让产品有合理标准</h2>
                                    <h2 class="welcome-title">让消费有合理依据</h2>
                                    <h2>四戒四免&nbsp; &nbsp;  &nbsp;&nbsp;三安三护</h2>
                                    <p>Advocate, leader and promoter of the healthy development of China's intelligent
                                        drug
                                        delivery industry</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<!--            德豹药品分包机器人系统-->
            <div class="item">
                <div class="slider-3">
                    <div class="slider-inner">
                        <div class="container">
                            <div class="row">
                                <div class="slider-inner-text">
                                    <h2 class="welcome-title">德豹</h2>
                                    <h2 class="welcome-title">智能药品分包机器人系统</h2>
                                    <h2>五高三好&nbsp; &nbsp;  &nbsp;&nbsp;器如豹捷</h2>
                                    <p>Advocate, leader and promoter of the healthy development of China's intelligent
                                        drug
                                        delivery industry</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!--欢迎来到德豹智能摆药中心-->
<section class="starting-text">
    <div class="container">
        <div class="row">
            <div class="welcome">
                <h2 class="welcome-title">欢迎来到德豹智能摆药中心</h2>
                <p class="welcome-txt">德豹智能药品分包系统是用来完成药品临床包装的高度自动化，高度智能化的智能医疗机器人系统。能够精准的高效的完成药品临床包装的必备现代化工具。 </p>
                <a class="welcome-btn" href="detail">详情查看</a>
            </div>
        </div>
    </div>
</section>

<!--摆药方案展示-->
<section id="services">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-sm-12 col-xs-12">
                <h2 class="headline text-center">
                    摆药方案展示
                </h2>
                <p class="sub-headline text-center">
                    Welcome to the Debao Dispensing Center
                </p>
            </div>
        </div>

        <div class="row">
<!--            循环摆药方案-->
            {% for i in dispen_program%}
            <div class="col-lg-4 col-sm-6 col-xs-12">
                <div class="hservice">
                    <div class="service-img">
                        <img class="img-responsive center-block" src="static/{{i.img}}" alt="">
                    </div>
                    <div class="service-description">
                        <div class="text-center">
                        <h4 class="service-heading">{{i.title}}</h4>
                        </div>
                        <p class="text_test">{{i.detail}}</p>
                        </div><div class="text-center">
                        <a href="static/{{i.detail_address}}" class="rm-btn btn btn-primary" target="_blank">
                            详情查看 <i class="fa fa-caret-right"></i></a>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            {% endfor %}


            <div class="row">
                <div class="col-lg-12 col-sm-12 col-xs-12">
                    <h2 class="headline text-center">
                        摆药产品展示
                    </h2>
                    <p class="sub-headline text-center">
                        Welcome to the Debao Dispensing Center
                    </p>
                </div>
            </div>

            {% for i in dispen_product%}
            <div class="col-lg-4 col-sm-6 col-xs-12">
                <div class="hservice">
                    <div class="service-img">
                        <img class="img-responsive center-block" src="static/{{i.img}}" alt="">
                    </div>
                    <div class="service-description">
                        <div class="text-center">
                        <h4 class="service-heading">{{i.title}}</h4>
                        </div>
                        <p class="text_test">{{i.detail}}</p>
                    </div><div class="text-center">
                        <a href="FTP file.html" class="rm-btn btn btn-primary">
                            详情查看 <i class="fa fa-caret-right"></i></a>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!--联系我们，客户服务电话-->
<section id="testimonial" class="text-center">
    <div class="testimonial-wrapper">
        <div class="container">
            <div class="row client-content text-center">
                <div class="col-md-8">
                    <div class="row">
                        <h1>联系我们</h1>
                    </div>
                    <div class="row">
                        <div class="sub-headline">
                            <p>公司地址:{{address}}</p>
                        </div>
                    </div>

                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <div id="client_speech">
                                    <div class="item">
                                        <div class="row">
                                            <div class="col-md-8 col-md-offset-2">
                                                <p class="client-comment text-center">
                                                    扫码进群由专业人员为您提供售后支持
                                                </p>
                                            </div>
                                            <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
                                                <img class="img-circle img-responsive center-block"
                                                     src="static/img/111.jpg" alt="Image">
                                            </div>
                                        </div>
                                        <div class="row text-center">
                                            <p class="client-name text-center">在线投诉</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div id="ClientSpeech">
                                    <div class="item">
                                        <div class="row">
                                            <div class="col-md-8 col-md-offset-2">
                                                <p class="client-comment text-center">
                                                    关注公众号了解摆药机，让包药进入人工智能时代
                                                </p>
                                            </div>
                                            <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
                                                <img class="img-circle img-responsive center-block"
                                                     src="static/img/222.jpg" alt="Image">
                                            </div>
                                        </div>
                                        <div class="row text-center">
                                            <p class="client-name text-center">企业公众号</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div id="client-speech">
                                    <div class="item">
                                        <div class="row">
                                            <div class="col-md-8 col-md-offset-2">
                                                <p class="client-comment text-center">
                                                    扫码添加技术人员，为您解决技术难题
                                                </p>
                                            </div>
                                            <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
                                                <img class="img-circle img-responsive center-block"
                                                     src="static/img/333.jpg" alt="Image">
                                            </div>
                                        </div>
                                        <div class="row text-center">
                                            <p class="client-name text-center">售后服务</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <a class="left carousel-control" href="#carousel-example-generic" role="button"
                           data-slide="prev">
                            <i class="fa fa-angle-left fa-3x"></i>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#carousel-example-generic" role="button"
                           data-slide="next">
                            <i class="fa fa-angle-right fa-3x"></i>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="appointment">

                        <div class="header text-center">
                            <h2>客户服务电话</h2>
                            <a href="#" class="number">
                                <i class="fa fa-phone fa-fw"></i>
                                0531-6865-9633

                            </a>
                            <span class="or">OR</span>
                        </div>

                        <!-- form of appointment -->
                        <div class="row">
                            <form method="post" action="#">
                                <div class="form">
                                    <div class="input-group margin-bottom-sm col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
                                        <input class="form-control" type="text" placeholder="Full Name *" required>
                                    </div>
                                    <div class="input-group margin-bottom-sm col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
                                        <input class="form-control" type="text" placeholder="Email Address *" required>
                                    </div>
                                    <div class="input-group margin-bottom-sm col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
                                        <input class="form-control" type="text" placeholder="Appointment Date *"
                                               required>
                                    </div>
                                    <div class="input-group margin-bottom-sm col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
                                        <input class="form-control" type="text" placeholder="Mobile Number *" required>
                                    </div>
                                </div>
                                <div class="input-group margin-bottom-sm col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
                                    <textarea class="form-control" rows="6" placeholder="Your Problem *"
                                              required></textarea>
                                </div>
                                <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
                                    <div class="captcha-container">
                                        <label>Are you human? </label><br/>
                                        <img src="" alt="">
                                        <input type="text" class="captcha required" name="captcha" maxlength="5"
                                               title=" Please enter the code characters displayed in image!">
                                    </div>
                                    <input class="btn btn-primary send" type="submit" value="Send">
                                </div>
                            </form>
                        </div>
                        <!-- end of form -->
                    </div><!-- end of appointment-->
                </div>
            </div> <!--  client-content  -->
        </div>
    </div>
</section>

{% endblock %}
